<template>
  <div class="boomWriteOrder">
    <div class="write">
      <div class="write_main">
        <div class="write_title">
          <div class="flex">
            <img src="https://image.hezongyy.com/pcimage/bird/dingwei.png" alt />
            <div class="title_rig">
              <div class="title_name">
                <span class="name">{{ address.consignee }}</span>
                <span class="tel">{{ address.mobile }}</span>
              </div>
              <span class="date"
                >{{this.address.province}} {{this.address.city}} {{this.address.district}} {{this.address.address}}</span
              >
            </div>
          </div>
          <div class="title_left" @click='toChange'>修改</div>
        </div>
        <img class="Imgs" src="../../assets/image/bottom_shod.png" alt />
      </div>
      <div class="write_item">
        <van-collapse v-model="activeNames">
          <van-collapse-item name="1" :content="tableData">
            <template #title>
              <div
                class="titles"
                style="
                  height: 1.26rem;
                  line-height: 1.26rem;
                  display: flex;
                  align-items: center;
                "
              >
                <span style="color: #222222; font-size: 14px">礼品信息</span>
                <van-icon name="收起" />
              </div>
            </template>
            <div class="goods_item">
              <div class="goods_items">
                <img :src="address.pictrue" alt />
                <div class="goods_center">
                  <span class="name">{{ address.goodsName }}</span>
                  <div class="goods_bottom">
                    <span>
                      <img src="../../assets/image/moliy.png" alt />
                      {{ address.point }}
                    </span>
                    <span class="iiii">X {{ address.quantity }}</span>
                  </div>
                  <div class="name">
                    <p class="sku">{{ address.skuName }}</p>
                  </div>
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
      <div class="footers">
        <div class="jifen">
          <div class="jifen_center">
            <span class="lipin">爆品金</span>
            <span class="li">
              <img src="../../assets/image/moliy.png" alt />
              <p>{{ address.totalPoints }}</p>
            </span>
          </div>
        </div>
        <div class="mmm">
          <img src="../../assets/img/poin_ti.png" alt="" />
          兑换的礼品不允许退货，非质量问题不允许换货
        </div>
        <div class="footer">
          <div class="foot">
            <span class="aa">爆品金合计:{{ address.totalPoints }}</span>
            <div class="ti" @click="toPayOrder()">提交申请</div>
          </div>
        </div>
      </div>
      <van-popup v-model="show" round>
        <div class="popTitle">修改收货信息</div>
        <div class="popUse">
          <p>收货人</p>
          <input type="text" placeholder="请输入收货人姓名" v-model='name'>
        </div>
        <div class="popUse">
           <p>联系电话</p>
          <input type="text" placeholder="请输入收货人的联系电话" v-model='phone'>
        </div>
        <div class="popUse">
          <p>收货地址</p>
          <div class="selectArea">
            <div :class="{area1:true}" @click='toShow()' v-if="!isSelect">请选择地区</div>
            <div :class="{area1:true,area2:true}" v-if="isSelect">{{provinceName}} {{cityName}} {{areaName}}</div>
            <div class="img" @click='toShow()'></div>
            <van-picker v-show='addressFlag' show-toolbar title="地址选择" :columns="columns" @confirm='onConfirm' @cancel='onCancel'/>
            <textarea v-model="details" placeholder="请输入详细地址" class='details'></textarea>
          </div>
        </div>
        <div class="bottom">
          <div class="leftClose" @click='toClose()'>取消</div>
          <div class="rightSave" @click='toSave()'>保存</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import url from "../../axios/apiUrl";
//引入api.js定义的方法index
import { postRequest } from "../../api/index";
import { getRequest } from "../../api/indexGet";
export default {
  data() {
    return {
      activeNames: ["1"],
      address: {}, //返回的所有数据
      tableData: [],
      api: JSON.parse(sessionStorage.getItem("ponitOrder")),
      btn: true,
      notedata: "", //备注
      skuName: "", //规格s
      show: false,
      columns: [],
      province:'',//省id
      city:'',//市id
      area:'',//区id
      provinceName:'',//省
      cityName:'',//市
      areaName:'',//区
      details:'',//详细地址
      phone:'',//编辑后的电话号码
      name:'',//编辑后的收货人
      addressFlag: false, //控制所有区域框
      isSelect:false,//是否选择省市区
    };
  },
  created() {
    postRequest(url.boomBeforeOrder, this.api).then(res => {
      this.address = res.data.content;
      this.tableData = res.data.content.pointGoods;
      this.province = this.address.province;
      this.city = this.address.city;
      this.area = this.address.district;
      this.details = this.address.address;
      this.name=this.address.consignee
      this.phone=this.address.mobile
    });
    getRequest(url.getDistrict).then(res=>{
      if(res.data.code=='000000'){
        this.columns=res.data.content
        this.columns.map((obj,index)=>{
          // 获取市
          obj.children.map(item=>{
            if(item.level==2){
              if(item.children.length==0){
                item.children.push({
                  id:'',
                  text:''
                })
              }
            }
            // 获取区
            if(item.children.length!=0){
              item.children.map(pop=>{
                if(pop.level==3){
                  if(pop.children.length==0){
                    pop.children.push({
                      id:'',
                      text:''
                    })
                  }
                }
              })
            }
          })
        })
        this.columns = JSON.parse(
          JSON.stringify(this.columns).replace(/name/g, "text")
        );
      }
    })
  },
  methods: {
    toPayOrder() {
      var apiFunc = {
        type: 2,
        channel: 2,
        param: {
          goodsId: this.address.goodsId,
          quantity: this.address.quantity,
          skuId: this.address.goodsId,
          remark: this.address.remark,
          skuName: this.address.goodsName
        },
        province:this.province,
        city:this.city,
        district:this.area,
        address:this.details,
        consignee:this.name,
        mobile:this.phone,
      };
      if (this.address.skuSpecList.length != 0) {
        apiFunc.param.skuId = this.address.skuId;
        apiFunc.param.skuName = this.address.skuName;
      }
      postRequest(url.boomSubOrder, apiFunc).then(res => {
        if (res.data.content) {
          sessionStorage.setItem(
            "totalPoint",
            JSON.stringify(this.address.totalPoints)
          );
          this.$router.push("/successOrder");
        } else {
          this.$toast({
            type: "error",
            message: res.data.message
          });
        }
      });
    },
    // 点击修改
    toChange() {
      this.show = true;
      this.provinceName=''
      this.cityName=''
      this.areaName=''
    },
    // 点击展开省市区
    toShow(){
      this.addressFlag=true
    },
    //点击确认
    onConfirm(picker){
      this.provinceName=picker[0]
      this.cityName=picker[1]
      this.areaName=picker[2]
      this.province=this.provinceName
      this.city=this.cityName
      this.area=this.areaName
      this.isSelect=true
      this.addressFlag=false
    },
    // 点击取消
    onCancel(picker){
      this.isSelect=false
      this.addressFlag=false
    },
    // 整个弹框取消
    toClose(){
      this.show=false
    },
    // 整个弹框保存
    toSave(){
      if(this.details&&this.phone&&this.name&&this.provinceName){
        let reg = /^[0-9]{1,20}$/;
        if(reg.test(this.phone)){
          this.show=false
          this.address.province=this.provinceName
          this.address.city=this.cityName
          this.address.district=this.areaName
          this.address.address=this.details
          this.address.consignee=this.name
          this.address.mobile=this.phone
        }else{
          this.$toast('请填写正确的联系方式')
        }
      }else{
        this.$toast('请填写完整的收货信息')
      }
    },
  },
};
</script>
<style lang="less" scoped>
.write {
  padding: 0;
  margin: 0;
  background: #eeeeee;
  .van-cell--clickable {
    // line-height: center;
    display: flex;
    align-items: center;
  }
  .van-cell__right-icon {
    margin-top: 0.42rem;
  }
  .write_main {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: #ffffff;
    .write_title {
      display: flex;
      align-items: center;
      height: 1.28rem;
      justify-content: space-between;
      .flex {
        display: flex;
        align-items: center;
        margin-left: 23px;
        img {
          width: 0.46rem;
          height: 0.46rem;
        }
        .title_rig {
          padding: 0.26rem;
          height: 1.2rem;
          line-height: 0.6rem;
          .title_name {
            line-height: 0.68rem;
            font-size: 0.3rem;
            color: #222222;
            // line-height: 0.3rem;
            font-weight: bold;
            .name {
              //   margin-right: 0.3rem;
            }
          }
          .date {
            color: #222222;
            font-size: 0.3rem;
          }
        }
      }
      .title_left {
        margin-right: 33px;
        width: 109px;
        height: 48px;
        border: 1px solid #3dbb2b;
        border-radius: 10px;
        font-size: 26px;
        color: #3dbb2b;
        text-align: center;
        line-height: 48px;
      }
    }
    .Imgs {
      height: 0.03rem;
      width: 100%;
    }
  }
  .write_item {
    position: relative;
    top: 1.6rem;
    overflow: hidden;
    border-top: 0.6rem solid #efefef;
    .titles {
      align-items: center;
    }
    .goods_item {
      height: 2.2rem;
      .goods_items {
        display: flex;
        justify-content: center;
        padding: 0.2rem;
        img {
          width: 1.6rem;
          height: 1.6rem;
        }
        .goods_center {
          width: 6.6rem;
          padding-left: 0.3rem;
          .name {
            font-size: 0.32rem;
            color: #343434;
            font-weight: bold;
          }
          .goods_bottom {
            bottom: 0;
            color: #1eb808;
            display: flex;
            justify-content: space-between;
            span {
              color: #1eb808;
              img {
                width: 0.3rem;
                height: 0.3rem;
              }
            }
            .iiii {
              color: #222222;
            }
          }
          .name {
            color: #000;
            font-size: 14px;
            font-weight: bold;
            line-height: 34px;
            margin-top: 0.2rem;
          }
        }
      }
    }
  }

  .footers {
    height: 3rem;
    width: 100%;
    background: #efefef;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 0.6rem solid #efefef;
    z-index: 666;
    .jifen {
      width: 100%;
      height: 1rem;
      background: #ffffff;
      border-bottom: 0.6rem solid #eeeeee;
      z-index: 666;
      border: 0.02rem solid #efefef;
      .jifen_center {
        display: flex;
        justify-content: space-between;
        line-height: 1rem;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        .lipin {
          color: #222222;
          font-size: 26px;
        }
        .li {
          width: 1.2rem;
          height: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            padding-right: 0.22rem;
          }
          p {
            color: #1eb808;
            font-size: 26px;
            font-weight: bold;
          }
        }
      }
    }
    .mmm {
      height: 1rem;
      line-height: 1rem;
      color: #ee746c;
      padding-left: 0.13rem;
      img {
        width: 0.28rem;
        height: 0.28rem;
      }
    }
    .footer {
      width: 100%;
      height: 1.1rem;
      line-height: 1.1rem;
      display: flex;
      justify-content: flex-end;
      // justify-content: left;
      background: #ffffff;
      border: 0.02rem solid #efefef;
      align-items: center;
      .foot {
        display: flex;
        align-items: center;
        padding-right: 0.2rem;
        padding-bottom: 0.12rem;
        .aa {
          font-size: 0.38rem;
          color: #fe343c;
          font-weight: bold;
          margin-right: 0.3rem;
        }
        .ti {
          width: 2.4rem;
          height: 0.8rem;
          line-height: 0.8rem;
          border-radius: 0.8rem;
          background: #1eb808;
          text-align: center;
          align-items: center;
          color: #ffffff;
          line-height: 0.8rem;
          font-size: 0.36rem;
        }
      }
    }
  }
  .van-popup {
    width: 600px;
    height: 969px;
    padding: 0 40px;
    .popTitle {
      height: 68px;
      font-size: 32px;
      font-weight: bold;
      color: #333333;
      text-align: center;
      line-height: 68px;
    }
    .popUse {
      p {
        font-size: 24px;
        font-weight: 500;
        color: #333333;
        margin-bottom: 19px;
      }
      input {
        width: 600px;
        height: 88px;
        background: #f7f7f7;
        border-radius: 10px;
        border: none;
        text-indent: 10px;
        margin-bottom: 22px;
      }
      .selectArea{
        position: relative;
        .area1{
          width: 600px;
          height: 88px;
          background: #F7F7F7;
          border-radius: 10px;
          font-size: 28px;
          font-weight: 500;
          color: #999999;
          line-height: 88px;
          text-indent: 10px;
        }
        .area2{
          color: #333
        }
        .img{
          position: absolute;
          right: 10px;
          top: 30px;
          width: 26px;
          height: 26px;
          background: url('https://image.hezongyy.com/pcimage/bird/jiantou.png') no-repeat center;
          background-size: 100% 100%;
        }
        .details{
          margin-top: 14px;
          text-indent: 10px;
          width: 600px;
          height: 200px;
          background: #F7F7F7;
          border-radius: 10px;
          border: none;
          font-size: 28px;
          font-weight: 500;
          line-height: 32px;
        }
      }
    }
    .bottom{
      display: flex;
      justify-content: space-between;
      margin: 57px 0 36px;
      .leftClose{
        width: 220px;
        height: 88px;
        background: #DCDCDC;
        border-radius: 10px;
        color: #666666;
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        line-height: 88px;
      }
      .rightSave{
        text-align: center;
        line-height: 88px;
        width: 350px;
        height: 88px;
        background: #3DBB2B;
        border-radius: 10px;
        font-size: 28px;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
    .van-picker{
      .van-picker__toolbar{
        height: 0px;
        display: none;
      }
    }
  }
}
</style>